<template>
    <BoxTitle class="sex">
        <template #title>
            <p>男女比例</p>
        </template>
        <template #content>
            <div class="middle">
                <div class="man">
                    <p>男士</p>
                    <img src="../images/man.png" alt="">
                </div>
                <div class="woman">
                    <p>女士</p>
                    <img src="../images/woman.png" alt="">
                </div>
            </div>
            <div class="rate">
                <p>男士54%</p>
                <p>女士46%</p>
            </div>
            <div class="charts" ref="charts">
            </div>
        </template>
    </BoxTitle>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import BoxTitle from './slot/boxtitle.vue'
let charts = ref()

onMounted(() => {
    let mycharts = echarts.init(charts.value);
    mycharts.setOption({
        // title: {
        //     text: '男女比例',
        //     textStyle: {
        //         color: 'white'
        //     },
        //     left: '40%',
        //     top: '18%',
        //     z: 4
        // },
        xAxis: {
            show: false,
            min: 0,
            max: 100
        },
        yAxis: {
            show: false,
            type: 'category'
        },
        series: [{
            type: 'bar',
            data: [54],
            barWidth: 20,
            z: 3,
            itemStyle: {
                borderRadius: 20
            }
        }, {
            type: 'bar',
            data: [100],
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
                color: 'pink',
                borderRadius: 20
            }
        }]
    })
})
</script>

<style scoped lang="scss">
.sex {
    flex: 1;
    .middle {
        display: flex;
        justify-content: center;
        font-size: 18px;

        .man {
            width: 111px;
            height: 115px;
            margin: 20px;
            background: url(../images/man-bg.png) no-repeat;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                margin-top: 25px;
            }
        }

        .woman {
            width: 111px;
            height: 115px;
            margin: 20px;
            background: url(../images/woman-bg.png) no-repeat;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                margin-top: 25px;
            }
        }
    }
}


.rate {
    font-size: 18px;
    display: flex;
    justify-content: space-around;
}

.charts {
    height: 60px;
}

// }
</style>